<!DOCTYPE html>
<html>
	<head>
		<title>订单详情</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style>
			.order-info {
				padding: 20px;
			}
			.info-section {
				margin-bottom: 20px;
				border-bottom: 1px solid #eee;
				padding-bottom: 20px;
			}
			.info-section:last-child {
				border-bottom: none;
			}
			.section-title {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 15px;
				color: #303133;
			}
			.info-item {
				margin-bottom: 10px;
				display: flex;
			}
			.info-label {
				width: 100px;
				color: #606266;
			}
			.info-content {
				color: #303133;
				flex: 1;
			}
			.status-tag {
				padding: 2px 8px;
				border-radius: 4px;
				color: white;
			}
			.status-pending { background-color: #E6A23C; }
			.status-paid { background-color: #409EFF; }
			.status-awaiting_shipment { background-color: #909399; }
			.status-shipped { background-color: #67C23A; }
			.status-completed { background-color: #67C23A; }
			.status-cancelled { background-color: #F56C6C; }

			/* 商品标签样式 */
			.info-content .el-tag {
				margin-right: 8px;
				font-weight: 500;
			}
		</style>
	</head>
	<body>
		<div id="app" class="order-info" v-loading="loading">
			<!-- 基本信息 -->
			<div class="info-section">
				<div class="section-title">订单基本信息</div>
				<div class="info-item">
					<div class="info-label">订单编号：</div>
					<div class="info-content">{{formatDisplayOrderId(orderInfo.id)}}</div>
				</div>
				<div class="info-item">
					<div class="info-label">订单状态：</div>
					<div class="info-content">
						<el-tag :type="getStatusType(orderInfo.status)">{{ getStatusText(orderInfo.status) }}</el-tag>
					</div>
				</div>
				<div class="info-item">
					<div class="info-label">创建时间：</div>
					<div class="info-content">{{orderInfo.createdAt || '未知'}}</div>
				</div>
				<div class="info-item">
					<div class="info-label">订单金额：</div>
					<div class="info-content notranslate">￥{{orderInfo.totalAmount || 0}}</div>
				</div>
			</div>

			<!-- 用户信息 -->
			<div class="info-section" v-if="orderInfo.user">
				<div class="section-title">用户信息</div>
				<div class="info-item">
					<div class="info-label">用户名：</div>
					<div class="info-content">{{orderInfo.user && orderInfo.user.nickname || '未知用户'}}</div>
				</div>
				<div class="info-item">
					<div class="info-label">联系电话：</div>
					<div class="info-content">{{orderInfo.user && orderInfo.user.phone || '无联系方式'}}</div>
				</div>
				<div class="info-item">
					<div class="info-label">电子邮箱：</div>
					<div class="info-content">{{orderInfo.user && orderInfo.user.email || '无邮箱信息'}}</div>
				</div>
			</div>

			<!-- 商品信息 -->
			<div class="info-section" v-if="orderInfo.product">
				<div class="section-title">商品信息</div>
				<div class="info-item">
					<div class="info-label">商品名称：</div>
					<div class="info-content">{{orderInfo.product && orderInfo.product.name || '未知商品'}}</div>
				</div>
				<div class="info-item">
					<div class="info-label">商品价格：</div>
					<div class="info-content">￥{{orderInfo.product && orderInfo.product.price || 0}}</div>
				</div>
				<div class="info-item">
					<div class="info-label">商品数量：</div>
					<div class="info-content">{{orderInfo.quantity || 0}}</div>
				</div>
				<div class="info-item">
					<div class="info-label">商品分类：</div>
					<div class="info-content">
						<el-tag type="info" size="small" v-if="orderInfo.product && orderInfo.product.category">
							{{ orderInfo.product.category.name }}
						</el-tag>
						<span v-else>未知分类</span>
					</div>
				</div>
				<div class="info-item">
					<div class="info-label">品牌：</div>
					<div class="info-content">
						<el-tag type="success" size="small" v-if="orderInfo.product && orderInfo.product.brand">
							{{ orderInfo.product.brand.name }}
						</el-tag>
						<span v-else>未知品牌</span>
					</div>
				</div>
			</div>

			<!-- 收货信息 -->
			<div class="info-section" v-if="orderInfo.address">
				<div class="section-title">收货信息</div>
				<div class="info-item">
					<div class="info-label">收货人：</div>
					<div class="info-content">{{orderInfo.address && orderInfo.address.receiverName || '未知收货人'}}</div>
				</div>
				<div class="info-item">
					<div class="info-label">联系电话：</div>
					<div class="info-content">{{orderInfo.address && orderInfo.address.phone || '无联系方式'}}</div>
				</div>
				<div class="info-item">
					<div class="info-label">收货地址：</div>
					<div class="info-content">{{(orderInfo.address && orderInfo.address.provinceCityDistrict) || ''}} {{(orderInfo.address && orderInfo.address.detailAddress) || ''}}</div>
				</div>
			</div>

			<!-- 优惠信息 -->
			<div class="info-section" v-if="orderInfo.coupon">
				<div class="section-title">优惠信息</div>
				<div class="info-item">
					<div class="info-label">优惠券：</div>
					<div class="info-content">{{orderInfo.coupon.name}}</div>
				</div>
			</div>
		</div>

		<script>
			// 配置axios默认值
			axios.defaults.baseURL = 'http://localhost:8080';

			var app = new Vue({
				el: '#app',
				data: {
					id: new URLSearchParams(window.location.search).get('id'),
					orderInfo: {
						id: null,
						status: '',
						product: {
							name: '',
							price: 0,
							description: ''
						},
						user: {
							nickname: '',
							phone: ''
						},
						address: {
							detail: ''
						},
						images: [],
						skus: [],
						quantity: 0,
						totalAmount: 0,
						createdAt: '',
						coupon: null
					},
					loading: false,
					baseImageUrl: 'http://8.134.184.130:8008/images/'
				},
				methods: {
					// 格式化订单ID
					formatOrderId(id) {
						if (!id) return '';
						// 如果ID包含模板语法，提取数字部分
						if (typeof id === 'string' && id.includes('{{')) {
							const match = id.match(/\d+/);
							if (!match) return '';
							return match[0];
						}
						// 如果已经是ORDER格式，提取数字部分
						if (String(id).toUpperCase().startsWith('ORDER')) {
							return String(id).replace(/[^0-9]/g, '');
						}
						// 直接返回数字部分
						return String(id).replace(/[^0-9]/g, '');
					},

					// 格式化显示订单ID
					formatDisplayOrderId(id) {
						if (!id) return '';
						// 如果ID包含模板语法，提取数字部分
						if (typeof id === 'string' && id.includes('{{')) {
							const match = id.match(/\d+/);
							if (!match) return '';
							const numPart = match[0];
							const paddedId = numPart.padStart(7, '0');
							return 'ORDER' + paddedId;
						}
						// 如果已经是ORDER格式，直接返回
						if (String(id).toUpperCase().startsWith('ORDER')) {
							return String(id).toUpperCase();
						}
						// 提取数字部分并格式化
						const numPart = String(id).replace(/[^0-9]/g, '');
						const paddedId = numPart.padStart(7, '0');
						return 'ORDER' + paddedId;
					},

					// 获取订单详情
					getOrderDetail() {
						if (!this.id) {
							this.$message.error('订单ID不能为空');
							return;
						}
						
						this.loading = true;
						const formattedOrderId = this.formatOrderId(this.id);
						console.log('Formatted Order ID:', formattedOrderId);

						if (!formattedOrderId) {
							this.$message.error('无效的订单ID');
							this.loading = false;
							return;
						}

						axios.get('/order/getOrderById', {
							params: {
								id: formattedOrderId
							}
						})
						.then(response => {
							if(response.data.code === 200) {
								// 确保所有必要的属性都存在
								this.orderInfo = {
									...this.orderInfo,  // 保持默认值
									...response.data.data,  // 使用API返回的数据覆盖
									id: response.data.data.id, // 保持原始ID
									orderId: response.data.data.orderId || response.data.data.id, // 订单编号
									product: response.data.data.product || {},
									user: response.data.data.user || {},
									address: response.data.data.address || {},
									images: response.data.data.images || [],
									skus: response.data.data.skus || [],
									quantity: response.data.data.quantity || 0,
									totalAmount: response.data.data.totalAmount || 0,
									createdAt: response.data.data.createdAt || '',
									coupon: response.data.data.coupon || null,
									attributes: response.data.data.attributes || []
								};
							} else {
								this.$message.error(response.data.message || '获取订单详情失败');
							}
						})
						.catch(error => {
							console.error('Error:', error);
							this.$message.error('获取订单详情失败');
						})
						.finally(() => {
							this.loading = false;
						});
					},
					// 获取状态文本
					getStatusText(status) {
						const statusMap = {
							'pending': '待支付',
							'awaiting_shipment': '待发货',
							'shipped': '已发货',
							'shipment': '发货中',
							'completed': '已完成',
							'awaiting_review': '待评价',
							'cancelled': '已取消'
						};
						return statusMap[status] || status;
					},
					// 获取状态类型
					getStatusType(status) {
						const statusTypeMap = {
							'pending': 'info',
							'paid': 'success',
							'awaiting_shipment': 'warning',
							'shipped': 'success',
							'shipment': 'primary',
							'completed': 'success',
							'cancelled': 'danger'
						};
						return statusTypeMap[status] || 'info';
					}
				},
				created() {
					this.getOrderDetail();
				}
			});
		</script>
	</body>
</html>
